<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
  getAllSkuListService,
  onSaleService,
  cancelSaleService,
  getSkuInfoService,
  deleteSkuService
} from '@/apis/product/sku'
import type {
  SkuData,
  AllSkuResponseData,
  SkuInfoResponseData
} from '@/apis/product/sku/type'

// 准备数据
const skuList = ref<SkuData[]>([])
const pageNo = ref<number>(1)
const pageSize = ref<number>(2)
const total = ref<number | string>(0)
// 获取数据
const getSkuList = async (pager = 1) => {
  pageNo.value = pager
  const res: AllSkuResponseData = await getAllSkuListService(
    pageNo.value,
    pageSize.value
  )
  skuList.value = res.data.records
  total.value = res.data.total
}

// 改变页码
const onSizeChange = (size: number) => {
  pageSize.value = size
  getSkuList()
}

// 上架/下架SKU商品
const toggleSale = async (row: SkuData) => {
  if (row.isSale === 1) {
    await cancelSaleService(row.id as number)
  } else {
    await onSaleService(row.id as number)
  }
  ElMessage.success(row.isSale ? '上架成功' : '下架成功')
}
// 更新商品
const updateSku = (row: SkuData) => {
  ElMessage.success(`程序员正在研发`)
  console.log(row)
}
// 获取sku详情
const skuInfo = ref<SkuData>({
  id: 0,
  skuName: '',
  skuDesc: '',
  spuId: 0,
  weight: 0,
  tmId: 0,
  price: 0,
  skuDefaultImg: '',
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
  category3Id: ''
})
const getSkuInfo = async (spuId: number) => {
  const res: SkuInfoResponseData = await getSkuInfoService(spuId)
  skuInfo.value = res.data
}
// 查看Sku信息
const drawerVisible = ref<boolean>(false)
const viewSkuInfo = async (row: SkuData) => {
  drawerVisible.value = true
  await getSkuInfo(row.id as number)
}
const deleteSku = async (row: SkuData) => {
  await ElMessageBox.confirm('确定删除该商品吗？', '提示', {
    type: 'warning'
  })
  await deleteSkuService(row.id as number)
  await ElMessage.success('删除成功')
  getSkuList(skuList.value.length > 1 ? pageNo.value : pageNo.value - 1)
}
onMounted(() => getSkuList())
</script>

<template>
  <el-card>
    <el-table :data="skuList" border lazy>
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column
        label="名称"
        show-overflow-tooltip
        prop="skuName"
      ></el-table-column>
      <el-table-column
        label="描述"
        show-overflow-tooltip
        prop="skuDesc"
      ></el-table-column>
      <el-table-column label="图片">
        <template #default="{ row }">
          <el-image
            :src="row.skuDefaultImg"
            fit="cover"
            style="width: 100px; height: 100px"
            lazy
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="weight"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="操作" width="250px">
        <template #default="{ row }">
          <el-button
            type="success"
            :icon="row.isSale ? 'Top' : 'Bottom'"
            @click="toggleSale(row)"
          ></el-button>
          <el-button
            type="primary"
            icon="Edit"
            @click="updateSku(row)"
          ></el-button>
          <el-button
            type="info"
            icon="InfoFilled"
            @click="viewSkuInfo(row)"
          ></el-button>
          <el-button
            type="danger"
            icon="Delete"
            @click="deleteSku(row)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </el-table>
    <el-pagination
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      :page-sizes="[2, 5, 10, 20]"
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      @size-change="onSizeChange"
      @current-change="getSkuList"
    ></el-pagination>

    <!-- drawer抽屉 -->
    <el-drawer v-model="drawerVisible" title="SKU详情">
      <template #default>
        <el-row>
          <el-col :span="6">名称</el-col>
          <el-col :span="18">{{ skuInfo.skuName }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">描述</el-col>
          <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">价格</el-col>
          <el-col :span="18">{{ skuInfo.price }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">平台属性</el-col>
          <el-col :span="18">
            <el-tag v-for="item in skuInfo.skuAttrValueList" :key="item.id">{{
              item.valueName
            }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">销售属性</el-col>
          <el-col :span="18">
            <el-tag
              v-for="item in skuInfo.skuSaleAttrValueList"
              :key="item.id"
              >{{ item.saleAttrValueName }}</el-tag
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">商品图片</el-col>
          <el-col :span="18">
            <el-carousel :interval="4000" type="card" height="200px">
              <el-carousel-item
                v-for="item in skuInfo.skuImageList"
                :key="item.id"
              >
                <h3 text="2xl" justify="center">
                  <el-image :src="item.imgUrl" :key="item.id" lazy> </el-image>
                </h3>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </template>
    </el-drawer>
  </el-card>
</template>

<style lang="scss" scoped>
.el-drawer {
  .el-row {
    margin-bottom: 20px;
    .el-col {
      font-size: 16px;
      font-weight: 700;
      color: #606266;
      text-align: center;
      .el-tag {
        margin: 0px 5px 3px;
      }
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
